<template>
    <el-dialog :title="type+'规则查看'" :visible.sync="dialogForm" width="800px">
        <el-form :inline="true" :model="form" ref="form" v-loading="loading" class="search-form"
                 label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="type+'规则名称：'" prop="feeRuleName">
                        {{ form.feeRuleName }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属单位：">
                        {{ form.orgName }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="业务模式：" prop="businessModule">
                        {{ form.businessModule | _filterBusinessModule }}
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="type==='计费'">
                    <el-form-item :label="type+'标准：'">
                        基本标准
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="type+'指标：'" prop="feeUnit">
                        {{ form.feeUnit | _filterFeeUnit }}
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="type==='计费'">
                    <el-form-item label="开票税率：">
                        {{ form.rate }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="type+'条件：'" prop="feeRule">
                        <div v-for="(item,index) in form.feeRule" :key="index">
                            <div style="display: flex">
                                <div style="width: 150px">
                                    {{ filterCode(item,index) }}
                                </div>
                                <div style="width: 150px">
                                    {{ item.operator | _filterRuleOperator }}
                                </div>
                                <div style="width: 150px;margin-right: 10px">
                                    {{ filterValue(index) }}
                                </div>
                                {{ item.isExistSub | _filterRuleConnect }}
                            </div>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="type+'规则描述：'">
                        {{ form.feeRuleDesc }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="factor[0].code">
                <el-col :span="24">
                    <el-form-item :label="type+'费率：'">

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="factor[0].code">
                <el-col :span="24">
                    <el-table :data="list" border stripe max-height="500" class="mt-10">
                        <el-table-column type="index" label="序号" fixed="left"  width="55"></el-table-column>
                        <el-table-column v-for="(item,index) in factor" :key="index" :prop="item.code"
                                         :label="item.name" 
                                         min-width="130">
                            <template slot-scope="scope">
                                <div style="display: flex">
                                    {{ list[scope.$index].factor[index].operator | _filterRuleOperatorType }}
                                    {{ list[scope.$index].factor[index].typeValue }}
                                    <!--{{ filterListValue(scope.$index,index) }}-->
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="rate" fixed="right" label="费率" 
                                         min-width="120"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">关 闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { getRuleRuleList, getRuleCodeValue, addRuleList, editRuleList, getRuleIdRate } from "@/api/balance/balance";
    import { maxLength, normalLength } from "@/utils/rules";
    function isArray(o){
        return Object.prototype.toString.call(o)=='[object Array]';
    }
    export default {
        name: "ruleForm",
        props: {
            type:{
                type:String,
                default:'计费'
            }
        },
        data() {
            return {
                dialogForm: false,
                isEdit: false,
                form: this.clearForm(),
                ruleList: [],
                isClick: true,
                loading: false,
                list: [],
                factor: [],
                factors: [],
            }
        },
        mounted() {
        },
        methods: {
            handleChangeRate(item) {
                this.ruleList.forEach(f => {
                    if (f.code === item.code) {
                        item.name = f.name
                    }
                })
            },
            loadData(id) {
                this.id = id
                getRuleIdRate(id).then(res => {
                    this.list = res.data.aaData
                    this.factor = JSON.parse(JSON.stringify(res.data.aaData[0].factor))
                    // if(this.factor[0].code){
                    //     this.getTypeValue(0)
                    // }
                    console.log(this.factor)
                })
            },
            getTypeValue(val) {
                if (val < this.factor.length) {
                    const el = this.factor[val]
                    const params = {
                        search_EQ_code: el.code
                    }
                    getRuleCodeValue(params).then(res => {
                        el.typeValue = res.data.aaData
                        this.getTypeValue(val + 1)
                    })
                }

            },
            getRule() {
                getRuleRuleList().then(res => {
                    this.ruleList = res.data.aaData
                })
            },
            // 获取dataSource
            getSource(val) {
                this.loading = true
                if (val < this.form.feeRule.length) {
                    let params = { search_EQ_code: this.form.feeRule[val].code }
                    getRuleCodeValue(params).then(res => {
                        this.form.feeRule[val].dataSource = res.data.aaData
                        this.getSource(val + 1)
                    })
                } else {
                    this.loading = false
                }
            },
            clearForm() {
                return {
                    feeRuleName: "",
                    orgId: this.$store.getters.currentUser.org.id,
                    orgName: this.$store.getters.currentUser.org.name,
                    businessModule: "",
                    chargingMode: "STANDARD",
                    feeUnit: "",
                    rate: "",
                    feeRuleDesc: "",
                    feeRule: [{           // 计费条件
                        code: "",
                        operator: "",
                        typeValue: '',
                        dataSource: [],
                        ruleDataType: '',
                        isExistSub: 'AND',
                    }],
                }
            },
            filterCode(item) {
                return this.ruleList.find(f=>{
                    return f.code===item.code
                }).name
            },
            filterValue(index) {
                const el = this.form.feeRule[index]
                if (el.operator === 'in' || el.operator === 'nIn') {
                    let name=[]
                    for (let i = 0; i < el.typeValue.length; i++) {
                        for (let j = 0; j < el.dataSource.length; j++) {
                            if(el.typeValue[i]===el.dataSource[j].code){
                                name.push(el.dataSource[j].name)
                            }
                        }
                    }
                    return name.join(',')
                } else {
                    for (let i = 0; i < el.dataSource.length; i++) {
                        if(el.dataSource[i].code===el.typeValue){
                            return el.dataSource[i].name
                        }
                    }
                }
            },
            filterListValue(i, index) {
                console.log(i,index)
                console.log(this.factor)
                const el = this.factor[index]
                if (this.list[i].factor[index].code === el.code&&el.typeValue) {
                    if(isArray(el.typeValue)){
                        for (let j = 0; j < el.typeValue.length; j++) {
                            const et = el.typeValue[j]
                            if (this.list[i].factor[index].typeValue === et.code) {
                                // console.log(et)
                                return et.name
                            }
                        }
                    }else{
                        return el.typeValue
                    }

                }
            }
        },
        computed: {
        },
    }
</script>

<style scoped>

</style>
